<!-- 通用表单编辑 -->
<template>
  <div class="edit-form-wrap">
    <el-form
      inline
      :model="form"
      :rules="rules"
      ref="form"
      label-width="124px">
      <el-form-item
        :label="item.label"
        :prop="item.prop"
        :key="item.prop"
        :class="item.className || className"
        v-for="(item) in columns">
        <!-- 下拉选项 -->
        <template v-if="~['select'].indexOf(item.type)">
          <el-select
            :ref="`select-${item.prop}`"
            v-model="form[item.prop]"
            @focus="getInputWidth(`select-${item.prop}`)"
            @change="item.change && item.change($event, item.prop, item.options)"
            v-bind="item.attr">
            <el-option
              border="false"
              :style="{ width: optionWidth}"
              v-for="option in item.options"
              :key="option[item.optionValue || 'value']"
              :label="option[item.optionLabel || 'label']"
              :value="option[item.optionValue || 'value']">
              <custom-tooltip
                :value="option[item.optionLabel || 'label'] || ''"
                :placement="placement" />
            </el-option>
          </el-select>
        </template>
        <!-- 时间日期 -->
        <template v-if="~['date'].indexOf(item.type)">
          <el-date-picker
            v-model="form[item.prop]"
            v-bind="item.attr"
          />
          <template v-if="item.rangeStart"><span class="el-line">-</span></template>
        </template>
        <!-- 输入框 -->
        <template v-if="~['input'].indexOf(item.type)">
          <el-input
            v-model="form[item.prop]"
            v-bind="item.attr" />
        </template>
        <!-- 带输入建议 -->
        <template v-if="~['autocomplete'].indexOf(item.type)">
          <el-autocomplete
            v-model="form[item.prop]"
            v-bind="item.attr"
            :title="item.attr.title && form[item.prop]"
            @select="item.select && item.select($event, item.prop)">
            <template slot-scope="{ 'item': obj }">
              <custom-tooltip
                :value="obj[item.attr.valueKey || 'value'] || ''"
                :placement="placement" />
            </template>
          </el-autocomplete>
        </template>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
// 定制化的tooltip
import CustomTooltip from '@components/custom-tooltip'
export default {
  name: 'EditForm',
  components: { CustomTooltip },
  props: {
    tooltipEffect: {
      type: String,
      default: 'dark'
    },
    placement: {
      type: String,
      default: 'right'
    },
    columns: {
      type: Array,
      default: () => []
    },
    form: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      className: 'edit-form-wrap',
      optionWidth: 0
    }
  },
  computed: {
    // 拿到校验规则
    rules () {
      return this.columns.reduce((pre, next) => {
        next.rules && Object.assign(pre, { [next.prop]: [...next.rules] })
        return pre
      }, {})
    }
  },
  methods: {
    getInputWidth (val) {
      // 获取当前焦点的input的宽度
      this.optionWidth = this.$refs[val][0].$refs.reference.getInput().offsetWidth + 'px'
    },
    // 公用方法
    forEachValue (obj = {}, fn) {
      Object.keys(obj).forEach(key => {
        fn(key, obj[key])
      })
    },
    validate (fn) {
      this.$refs.form.validate(fn)
    },
    validateField (arg, fn) {
      this.$refs.form.validateField(arg, fn)
    },
    clearValidate (...arg) {
      this.$nextTick(() => {
        this.$refs.form.clearValidate(...arg)
      })
    }
  }
}
</script>
<style lang="less">
.edit-form-wrap {
  .el-input {
    width: 202px;
  }
  .edit-form-wrap.el-form-item {
    width: 30%;
  }
  .el-form-item.el-form-picker {
    width: auto;
  }
  .el-input__inner {
    height: 34px;
    line-height: 34px;
    width: 211px;
  }
  .el-line {
    padding-left: 6px;
  }
}
</style>
